var timer = null;

window.onload = function(){
	
	// 获取div元素
	var oDiv = document.querySelector('div.scroll'),
		// 获取div元素中的ul元素
		oUl  = oDiv.querySelector('ul'),
		// 获取ul元素中的所有li元素
		oLis = oUl.querySelectorAll('li'),
		// 获取li元素的个数
		liLen = oLis.length,
		// 获取每一个li元素的宽度
		liWidth = oDiv.clientWidth / liLen,
		// 定义一个索引
		idx = 0;
	// ul元素的style(样式)属性的宽度属性，给它设置值。相当于是去操作css样式
	oUl.style.width = oDiv.clientWidth * 2 + liWidth + 'px';
	
	for(var i=0; i<liLen; i++){
		// 循环的把每一个li元素克隆一份并且追加到ul元素内容的后面。
		oUl.appendChild(oLis[i].cloneNode(true));
	}
	// 索引设置为1。
	idx = 1;
	
	// 计时器，第一秒执行一次匿名函数
	timer = window.setInterval(function(){
		// 设置ul元素的css属性的过渡效果
		oUl.style.transition = 'all .5s';
		// 设置ul元素的css属性的左外边距
		oUl.style.marginLeft = - liWidth * idx + 'px';
		
		// 当索引 等于 li元素的个数时
		if(idx == liLen){
			// 设置索引为0
			idx = 0;
			console.log(idx);
			// 给ul元素设置一个监听事件，监听ul的过渡效果是否完成，过渡效果完成以后执行setStyle函数
			oUl.addEventListener('transitionend', setStyle);
		}

		function setStyle(){
			// 设置ul元素过渡效果为none，取消过渡效果
			oUl.style.transition = 'none';
			// 设置ul元素的左边外距为0
			oUl.style.marginLeft = 0 + 'px';
			// 移除ul元素的过渡效果监听事件
			oUl.removeEventListener('transitionend', setStyle);
		}
		// 索引加1
		idx++;
	
	}, 1000);
	
	
}




// window.onload = function(){
// 	
// 	var oDiv = document.querySelector('div.scroll'),
// 		oUl  = oDiv.querySelector('ul'),
// 		oLis = oUl.querySelectorAll('li');
// 	
// 	var childs = oUl.children,
// 		idx    = 0;
// 	//console.log(childs);
// 			
// 	timer = window.setInterval(function(){
// 		
// 		if(idx >= oLis.length){
// 			idx = 0;
// 		}
// 		
// 		var oIdx = oLis[idx].cloneNode(true);
// 		oUl.appendChild(oIdx);
// 		oUl.removeChild(childs[0]);
// 		idx++;
// 		
// 	}, 3000);
// 	
// 
// 	
// }